/* 全局CSS变量定义 - 基础变量 */

/* 圆角系统 */
:root {
  --border-radius: 12px;
  --border-radius-small: 8px;
  --border-radius-mini: 4px;
  
  /* 间距系统 */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  
  /* 字体大小系统 */
  --font-size-xs: 10px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 24px;
  --font-size-3xl: 32px;
  --font-size-4xl: 48px;
  
  /* 过渡动画 */
  --transition-base: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Z-index层级 */
  --z-index-dropdown: 1000;
  --z-index-sticky: 100;
  --z-index-modal: 2000;
  --z-index-tooltip: 3000;
}

/* 渐变样式系统 */
.gradient-primary {
  background: linear-gradient(135deg, var(--primary-color), #66b1ff);
}

.gradient-primary-reverse {
  background: linear-gradient(135deg, #66b1ff, var(--primary-color));
}

.gradient-success {
  background: linear-gradient(135deg, #67C23A, #85ce61);
}

.gradient-danger {
  background: linear-gradient(135deg, #ff6b6b, #ff4d4d);
}

.gradient-danger-reverse {
  background: linear-gradient(135deg, #ff4d4d, #ff6b6b);
}

.gradient-page {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.gradient-glass {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.6));
}

.gradient-glass-heavy {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.8));
}

.gradient-glass-heavy-2 {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.9));
}

/* 通用工具类 */
.card-style {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: var(--backdrop-blur);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-medium);
  transition: var(--transition-base);
}

.card-style:hover {
  box-shadow: var(--shadow-heavy);
  transform: translateY(-2px);
}

.section-style {
  background: rgba(255, 255, 255, 0.6);
  border-radius: var(--border-radius-small);
  border: 1px solid rgba(255, 255, 255, 0.4);
  transition: var(--transition-base);
}

.section-style:hover {
  background: rgba(255, 255, 255, 0.8);
  transform: translateY(-1px);
  box-shadow: var(--shadow-light);
}

.button-style {
  border-radius: var(--border-radius-small);
  font-weight: 500;
  transition: var(--transition-base);
}

.button-style:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-medium);
}

.input-style {
  border-radius: var(--border-radius-small);
  transition: var(--transition-fast);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.input-style:hover {
  box-shadow: var(--shadow-light);
  transform: translateY(-1px);
}

.input-style:focus {
  box-shadow: var(--shadow-medium);
  border-color: var(--primary-color);
}

/* 响应式断点 */
@media screen and (max-width: 1200px) {
  :root {
    --spacing-xl: 24px;
    --spacing-2xl: 32px;
  }
}

@media screen and (max-width: 768px) {
  :root {
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    --spacing-2xl: 24px;
    --font-size-2xl: 20px;
    --font-size-3xl: 24px;
  }
}

@media screen and (max-width: 480px) {
  :root {
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    --font-size-xl: 16px;
    --font-size-2xl: 18px;
  }
} 